const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const merge = require('webpack-merge');
const common = require('./webpack.common');

let prodConfig = {
    mode: 'production',
    output: {
        filename: "main.[hash].js",
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.(sc|c|sa)ss$/,
            use: [
                MiniCssExtractPlugin.loader, {
                    loader: "css-loader",
                    // 开发者调试
                    options: {
                        sourceMap: true
                    }
                }, {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [require("autoprefixer")("last 100 versions")]
                    }
                }, {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true
                    }
                }]
        }]
    },
    plugins: [
        // 抽取css
        new MiniCssExtractPlugin({
            filename: '[name].[hash].css', // 设置最终输出的文件名
            chunkFilename: '[id].[hash].css'
        }),
        // 压缩js
        new UglifyJsPlugin({
            cache: true,
            parallel: true,
            sourceMap: true
        }),
        // 压缩css
        new OptimizeCSSAssetsPlugin(['dist'])
    ]
};

module.exports = merge(common, prodConfig);